<template>
  <div class="component">
    <el-card>
      <el-table stripe :data="tableData" style="width: 100%">
        <el-table-column fixed type="index" label="序号" width="50">
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="subject.name"
          label="所属科目"
          width="150"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="title"
          label="标题"
          width="200"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="content"
          label="简介"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="coverUrl"
          label="封面"
        >
        </el-table-column>
        <el-table-column
          show-overflow-tooltip
          prop="score"
          label="评分"
          width="80"
        >
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template slot-scope="scope">
            <el-button @click="detail(scope.row)" type="text" size="small"
              >查看</el-button
            >
            <el-button @click="edit(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
        style="margin-top: 2rem"
        @size-change="size1"
        @current-change="current1"
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
      >
      </el-pagination>
    </el-card>

    <!-- 外层弹框 -->
    <el-dialog
      top="5vh"
      title="课程详情"
      :visible.sync="dialogVisible"
      width="80%"
    >
      <!-- 课程 -->
      <el-form style="text-align: left" label-width="80px">
        <!-- 所属科目 -->
        <el-form-item label="所属科目">
          <el-select
            :disabled="formDisable"
            v-model="form1.subject"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <!-- 课程标题 -->
        <el-form-item label="课程标题">
          <el-input :disabled="formDisable" v-model="form1.title"></el-input>
        </el-form-item>

        <!-- 课程简介 -->
        <el-form-item label="课程简介">
          <el-input
            :disabled="formDisable"
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 10 }"
            placeholder="请输入内容"
            v-model="form1.content"
          >
          </el-input>
        </el-form-item>
      </el-form>

      <!-- 课时 -->
      <el-card>
        <div style="width: 100%">
          <h2 style="float: left; text-align: left">课时列表</h2>
        </div>
        <el-table stripe :data="tableData2" style="width: 100%">
          <el-table-column fixed type="index" label="序号" width="100">
          </el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="title"
            label="标题"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="url"
            label="视频地址"
          ></el-table-column>
          <el-table-column
            show-overflow-tooltip
            prop="duration"
            label="视频时长 / 秒"
            width="200"
          ></el-table-column>
          <el-table-column
            v-if="!formDisable"
            label="操作"
            width="150"
            fixed="right"
          >
            <template slot-scope="scope">
              <el-button
                @click="innerDetail(scope.row)"
                type="text"
                size="small"
                >详情</el-button
              >
            </template>
          </el-table-column>

          <span slot="footer" class="dialog-footer">
            <el-button @click="innerVisible = false">取 消</el-button>
            <el-button type="primary" @click="innerVisible = false"
              >确 定</el-button
            >
          </span>
        </el-table>

        <!-- <el-pagination
          style="margin-top: 2rem"
          @size-change="createTable"
          @current-change="createTable"
          :current-page="page.currentPage"
          :page-sizes="page.pageSizes"
          :page-size="page.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="page.total"
        >
        </el-pagination> -->

        <el-pagination
          style="margin-top: 2rem"
          @size-change="createTable"
          @current-change="createTable"
          :current-page="1"
          :page-sizes="page.pageSizes"
          :page-size="10"
          layout="total, sizes, prev, pager, next, jumper"
          :total="2"
        >
        </el-pagination>
      </el-card>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateForm1"
          >确 定</el-button
        >
      </span>

      <!-- 内层弹窗 -->
      <el-dialog
        width="30%"
        title="课时详情"
        :visible.sync="innerVisible"
        append-to-body
      >
        <el-form style="text-align: left" label-width="100px">
          <el-form-item label="课时id">
            <el-input disabled v-model="form2.id"></el-input>
          </el-form-item>
          <el-form-item label="课时标题">
            <el-input v-model="form2.title"></el-input>
          </el-form-item>
          <el-form-item label="课时视频Url">
            <el-input disabled v-model="form2.url"></el-input>
          </el-form-item>
          <el-form-item label="时长/秒">
            <el-input disabled v-model="form2.duration"></el-input>
          </el-form-item>
        </el-form>

        <span slot="footer" class="dialog-footer">
          <el-button @click="innerVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateForm2">确 定</el-button>
        </span>
      </el-dialog>
    </el-dialog>
  </div>
</template>

<script>
import { page, getById, list, update } from "@/api/common";
export default {
  data() {
    return {
      dialogVisible: false,
      innerVisible: false,

      formDisable: false,
      options: [],

      tableData: [],
      page: {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      form1: {
        id: "",
        title: "",
        subject: "",
        content: "",
      },

      tableData2: [],
      page2: {
        pageSizes: [10, 20, 50, 100],
        pageSize: 10,
        currentPage: 1,
        total: 0,
      },
      form2: {
        id: "",
        title: "",
        url: "",
        duration: "",
      },

      headers: {
        token: "",
      },
    };
  },
  created() {
    const pageNum = this.page.currentPage;
    const pageSize = this.page.pageSize;
    this.createTable(pageNum, pageSize);

    this.headers.token = this.$store.getters["user/token"];
  },
  methods: {
    createTable(pageNum, pageSize) {
      const teacherId = this.$store.getters["user/id"];
      page("courseLesson", { teacherId, pageNum, pageSize }).then((res) => {
        const tableData = [];
        res.data.forEach((element) => {
          const id = element.subjectId;
          getById("courseSubject", { id }).then((res2) => {
            let score = Number(element.score) / Number(element.scorePeople);
            if (isNaN(score)) {
              score = 0;
            }
            const tableDataItem = {
              id: element.id,
              subject: res2,
              title: element.title,
              content: element.content,
              coverUrl: element.coverUrl,
              score: score,
            };
            tableData.push(tableDataItem);
          });
        });
        this.tableData = tableData;
        this.page.total = res.total;
      });
    },

    current1(num) {
      this.page.currentPage = num;
      const pageSize = this.page.pageSize;
      this.createTable(num, pageSize);
    },
    size1(num) {
      this.page.pageSize = num;
      const pageNum = this.page.currentPage;
      this.createTable(pageNum, num);
    },

    detail(row) {
      this.dialogVisible = true;
      this.formDisable = true;
      this.form1.id = row.id;
      this.form1.title = row.title;
      this.form1.subject = row.subject;
      this.form1.content = row.content;
      this.getSubject();

      const lessonId = row.id;
      const pageNum = this.page2.currentPage;
      const pageSize = this.page2.pageSize;
      page("courseLessonPeriod", { lessonId, pageNum, pageSize }).then(
        (res) => {
          this.tableData2 = res.data;
          this.page2.total = res.total;
        }
      );
    },
    edit(row) {
      this.detail(row);
      this.formDisable = false;
    },

    innerDetail(row) {
      this.innerVisible = true;
      this.form2.id = row.id;
      this.form2.title = row.title;
      this.form2.url = row.url;
      this.form2.duration = row.duration;
    },

    updateForm1() {
      const id = this.form1.id;
      const subjectId = this.form1.subject.id;
      const title = this.form1.title;
      const content = this.form1.content;

      update("courseLesson", { id, subjectId, title, content }).then(() => {
        this.dialogVisible = false;
        const pageNum = this.page.currentPage;
        const pageSize = this.page.pageSize;
        this.createTable(pageNum, pageSize);
      });
    },

    updateForm2() {
      const title = this.form2.title;
      const id = this.form2.id;

      update("courseLessonPeriod", { id, title }).then(() => {
        this.innerVisible = false;
        const lessonId = this.form1.id;
        const pageNum = this.page2.currentPage;
        const pageSize = this.page2.pageSize;
        page("courseLessonPeriod", { lessonId, pageNum, pageSize }).then(
          (res) => {
            this.tableData2 = res.data;
            this.page2.total = res.total;
          }
        );
      });
    },

    getSubject() {
      list("/courseSubject", {}).then((res) => {
        this.options = res;
      });
    },
  },
};
</script>

.<style lang="scss" scoped>
.component {
  margin: 2rem;
}
</style>